<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>Three.js Parallax Effect</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css"
/>
<link rel="stylesheet" type="text/css" media="screen" href="style.css" />
</head>
<body>
<div id="container"></div>
<section>
<div>
<h1>Parallax Skybox</h1>
<p>- three.js -</p>
<p id="arrow">»</p>
</div>
</section>
<section>
<div></div>
</section>
<section>
<div></div>
</section>
<section>
<div>
<p id="arrow">»</p>
</div>
</section>
<section>
<div></div>
</section>
<section>
<div>
<p id="arrow">»</p>
</div>
</section>
<section>
<div></div>
</section>
<script
async
src="https://ga.jspm.io/npm:es-module-shims@1.6.3/dist/es-module-shims.js"
crossorigin="anonymous"
></script>
<script type="importmap">
{
"imports": {
"three": "https://unpkg.com/three@0.154.0/build/three.module.js",
"three/addons/": "https://unpkg.com/three@0.154.0/examples/jsm/"
}
}
</script>
<script type="module" src="script.js"></script>
</body>
</html>